
<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title>鼠标悬停效果代码</title>
  <!-- 第二步：开始写css样式 -->
  <style>
    * {
    margin: 0;
    padding: 0;
    }

    body {
    font-family: "Lato", sans-serif;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background-color: #001628;
    }

    .container {
    position: relative;
    width: 90%;
    display: grid;
    grid-template-columns: repeat(auto-fit, 
    minmax(250px, 1fr));
    grid-gap: 70px;
    }
    /* 这里主要用到了skew，
    定义沿着x和Y轴的2D倾斜旋转，
    与rotate不同的时，它不仅使元素旋转，
    而且会使元素变形 */
    .container .box::before {
    content: '';
    position: absolute;
    height: 100%;
    width: 100%;
    background: #fff;
    z-index: -1;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    transform: skew(2deg, 3deg);
    transition: .5s;
    }
    /* 鼠标移入改变skew */
    .container .box:hover:before {
    transform: skew(-2deg, -3deg);
    }

    .container .box {
    position: relative;
    color: #fff;
    height: 400px;
    display: flex;
    align-content: center;
    align-items: center;
    background-color: #001628;
    }

    .container .box:nth-child(1):before {
    background: linear-gradient(to right, 
    #00c3ff, #ffff1c);
    }

    .container .box:nth-child(2):before {
    background: linear-gradient(to right, 
    #ef32d9, #89fffd);
    }

    .container .box:nth-child(3):before {
    background: linear-gradient(to right, 
    #e96443, #904e95);
    }


    .content {
    padding: 0 40px;
    position: relative;
    }


    .content h2 {
    font-weight: 700;
    font-size: 30px;
    margin-bottom: 30px;
    }

    .content p {
    letter-spacing: 1px;
    font-size: 18px;
    }
    </style>

</head>
<!-- 第一步：html部分代码 -->
<body>
  <div class="container">
    <div class="box">
        <div class="content">
            <h2>清晰的学习路线</h2>
            <p>
                明确学习路径，必学+选修，基础+实战+进阶，
                循序渐进，系统性的学习，完成完整的实战项目！
                解决不知从何学起，盲目学习，动手能力差，
                学习效率低等问题。
            </p>
        </div>
    </div>
    <div class="box">
        <div class="content">
            <h2>闯关式+督促式 学习</h2>
            <p>
                学习过程中会自动弹出闯关题，答对才能继续，
                一节一节完成小目标，通过克服困难来获得快乐，
                增加学习成就；另外不断的进行学习督促提醒，
                杜绝拖延，养成自律学习好习惯！
            </p>
        </div>
    </div>
    <div class="box">
      <div class="content">
        <h2>老师随时辅导答疑</h2>
        <p>
            专属班级内部群，在学习过程中遇到任何问题，
            都可以随时请教，老师会第一时间响应，
            甚至远程协助，教你学会如何定位和分析问题，
            提升自学和解决问题的能力，增加学习信心。
        </p>
      </div>
    </div>
</div>
</body>
</html>
